<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>user-card</title>
    <link rel="stylesheet" href="css/user_card.css">
    <link rel="stylesheet" href="font2/iconfont.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/lightbox.css">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon.png">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<!--导航头部-->
<nav>
    <div class="nav_1">
        <div class="nav_img">
            <img src="images/logo.png"/>
            <img src="images/text.png"/>
        </div>
    </div>
    <ul class="nav_ul">
        <li>
            <i class="iconfont  icon-youjian"></i>
            <span class="circle"></span>
            <span class="circlet"></span>
            <ul class="nav_ul_1">
                <li>You Have 4 New Message</li>
                <li>
                    <img src="images/varun2.jpg"/>
                    <span>Pavan Kumar</span>
                    <p>9:30 AM</p>
                </li>
                <li>
                    <img src="images/varun3.jpg"/>
                    <span>Hritik Roshan</span>
                    <p>9:20 AM</p>
                </li>
                <li>
                    <img src="images/varun4.jpg"/>
                    <span>Pwandeep rajan</span>
                    <p>9:10 AM</p>
                </li>
                <li>
                    <img src="images/varun5.jpg"/>
                    <span>John Abraham</span>
                    <p>9:40 AM</p>
                </li>
                <li>Sell all notifications</li>
            </ul>

        </li>
        <li>
            <i class="iconfont icon-627yuanquanxuanzhong"></i>
            <span class="circle"></span>
            <span class="circlet"></span>
            <div class="nav_ul_2"><img src="images/nav_ul_2.png"/></div>
        </li>
        <li><i>Mega</i></li>
        <li class="stg" style="display:none"><i class="iconfont icon-santiaogang" ></i></li>
    </ul>
    <div class="nav_user">
        <img class="nav_userimg" src="images/varun.jpg">
        <h3>Steave</h3>
        <div class="nav_arror"></div>
    </div>
    <div class="nav_input">
        <input type="text" placeholder="Search..."/>
        <img src="images/bigmirror.png"/>
    </div>
</nav>
<!--侧边栏-->
<div class="content">
    <aside>
        <ul class="aside_ul">
            <li><i class="iconfont icon-santiaogang"></i><span>Navigation</span></li>
            <li class="libox">
                <img class="nav_userimg" src="images/varun.jpg">
                <span>Steve Gection</span>
                <b></b>
            </li>
            <li class="dom">
                    <a href="baipengfei.html"><h3>A</h3><h5>Baipengfei</h5></a>
                    <a href="Dashboard1.html"><h3>B</h3><h5>Zhangqifan</h5></a>
                    <a href="Dashboard3.html"><h3>C</h3><h5>Yangxu</h5></a>
                    <a href="chart.html"><h3>D</h3><h5>Liusaisai</h5></a>
                    <a href="user_card.html"><h3>E</h3><h5>Zhangyifan</h5></a>
                    <a href="UI Elements.html"><h3>F</h3><h5>Jingjing</h5></a>
                    <a href="panels-wells.html"><h3>G</h3><h5>Liudan</h5></a>
                </li>
            <li class="libox"><i class="iconfont icon-dashboard"></i><span>Dash Board</span></li>
            <li class="libox"><i class="iconfont icon-gouwuchekong"></i><span>eCommerce</span><b></b></li>
            <li class="libox"><i class="iconfont icon-huojian"></i><span>UI Elements</span></li>
            <li class="libox"><i class="iconfont icon-pages"></i><span>Sample Pages</span></li>
            <li class="libox"><i class="iconfont icon-apps"></i><span>Apps</span><b></b></li>
            <li class="libox"><i class="iconfont icon-forms"></i><span>Forms</span><b></b></li>
            <li class="libox"><i class="iconfont icon-table"></i><span>Tables</span></li>
            <li class="libox"><i class="iconfont icon-charts"></i><span>Charts</span><b></b></li>
            <li class="libox"><i class="iconfont icon-shezhi"></i><span>Wid Gets</span></li>
            <li class="libox"><i class="iconfont icon-xiaolian"></i><span>Icons</span></li>
            <li class="libox"><i class="iconfont icon-map"></i><span>Google Map</span><b></b></li>
            <li class="libox"><i class="iconfont icon-maps"></i><span>Calender</span></li>
            <li class="libox"><i class="iconfont icon-calender-check-o"></i><span>Gallern</span><b></b></li>
        </ul>
    </aside>
</div>
<!--右边侧边栏-->
<div class="Bright">
    <div class="Bright_1">
        <span>SERVICE PANEL</span>
        <span class="Bright_1_1">×</span>
    </div>
    <div class="Bright_2">
        <div class="Bright_2_1">
            <h3>With Light sidebar</h3>
            <div class="Bright_2_1_1">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>
        </div>
        <div class="Bright_2_2">
            <h3>With Dark sidebar</h3>
            <div class="Bright_2_2_1">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>
        </div>
        <div class="Bright_2_3">
            <h3>Chat option</h3>
            <ul class="Bright_2_3_1">
                <li>
                    <a href="#">
                        <img src="images/varun.jpg"/>
                        <span>
                                Varun Dhavan
                                <small class="text-success">online</small>
                            </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/varun2.jpg"/>
                        <span>
                                GeneLia Deshmukh
                                <small class="text-success other1">Away</small>
                            </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/varun3.jpg"/>
                        <span>
                                Ritesh Deshmukh
                                <small class="text-success other2">Bush</small>
                            </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/varun4.jpg"/>
                        <span>
                                Arijit Sinh
                                <small class="text-success other3">Offline</small>
                            </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/varun5.jpg"/>
                        <span>
                                Govinda Star
                                <small class="text-success">online</small>
                            </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/varun6.jpg"/>
                        <span>
                                John Abraham
                                <small class="text-success">online</small>
                            </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/varun7.jpg"/>
                        <span>
                                Hritik Roshan
                                <small class="text-success">online</small>
                            </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/varun8.jpg"/>
                        <span>
                                Pwandeep rajan
                                <small class="text-success">online</small>
                            </span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<!--------------------------------------user_card内容部分------------------------------->
<div class="y_main">
  <div class="y_main_con">
    <!--小齿轮栏-->
      <div class="y_c_title">
          <div class="y_title_left">
              <h4>User Card </h4>
          </div>
          <div class="y_title_right">
              <ul class="y_ul_s">
                  <li>
                      <a href="####">Dashboard</a>
                      <span>/</span>
                  </li>
                  <li class="y_ls2">User Card</li>
              </ul>
              <a href="####" class="y_now">Buy Admin Now</a>
              <div class="Bheader_6" style="margin-top:0px"><i class="iconfont icon-shezhi"></i></div>
          </div>
      </div>
    <!--列表内容-->
    <div class="y_contain">
        <!--一层-->
        <div class="y_col_one">
            <div class="y_col_title">
                <p class="y_p1">Fade-in effect </p>
                <p class="y_p2">You can use by default <span>el-overlay</span></p>
            </div>
            <div class="y_col_content">
               <div class="y_man">
                   <dl>
                       <dt class="y_dt"><img src="images/1.jpg"></dt>
                       <dd>
                           <p class="y_p_one">Genelia Deshmukh</p>
                           <p class="y_p_two">Managing Director</p>
                       </dd>
                       <div class="y_meng"></div>
                       <div class="y_square">
                           <div class="y_square_one"><a href="###" class="js-lightbox" data-role="lightbox" data-group="group-1"data-id="one" width="300" height="300" data-source="images/1.jpg"><i class="iconfont icon-fangdajing"></i></a></div>
                           <div class="y_square_two"><a href="###"><i class="iconfont icon-lianjie"></i></a></div>
                       </div>
                   </dl>

               </div>
                <div class="y_man">
                    <dl>
                        <dt class="y_dt"><img src="images/2.jpg"></dt>
                        <dd>
                            <p class="y_p_one">Genelia Deshmukh</p>
                            <p class="y_p_two">Managing Director</p>
                        </dd>
                        <div class="y_meng"></div>
                        <div class="y_square">
                            <div class="y_square_one"><a href="####" class="js-lightbox" data-role="lightbox" data-group="group-1"data-id="one" width="300" height="300" data-source="images/2.jpg" ><i class="iconfont icon-fangdajing"></i></a></div>
                            <div class="y_square_two"><a href="####"><i class="iconfont icon-lianjie"></i></a></div>
                        </div>
                    </dl>

                </div>
                <div class="y_man">
                    <dl>
                        <dt class="y_dt"><img src="images/3.jpg"></dt>
                        <dd>
                            <p class="y_p_one">Genelia Deshmukh</p>
                            <p class="y_p_two">Managing Director</p>
                        </dd>
                        <div class="y_meng"></div>
                        <div class="y_square">
                            <div class="y_square_one"><a href="####"class="js-lightbox" data-role="lightbox" data-group="group-1"data-id="one" width="300" height="300" data-source="images/3.jpg" ><i class="iconfont icon-fangdajing"></i></a></div>
                            <div class="y_square_two"><a href="####"><i class="iconfont icon-lianjie"></i></a></div>
                        </div>
                    </dl>

                </div>
                <div class="y_man">
                    <dl>
                        <dt class="y_dt"><img src="images/4.jpg"></dt>
                        <dd>
                            <p class="y_p_one">Genelia Deshmukh</p>
                            <p class="y_p_two">Managing Director</p>
                        </dd>
                        <div class="y_meng"></div>
                        <div class="y_square">
                            <div class="y_square_one"><a href="####" class="js-lightbox" data-role="lightbox" data-group="group-1"data-id="one" width="300" height="300" data-source="images/4.jpg"><i class="iconfont icon-fangdajing"></i></a></div>
                            <div class="y_square_two"><a href="####"><i class="iconfont icon-lianjie"></i></a></div>
                        </div>
                    </dl>

                </div>




            </div>
        </div>
        <!--二层-->
        <div class="y_col_one">
            <div class="y_col_title">
                <p class="y_p1">Scroll down effect  </p>
                <p class="y_p2">You can use scroll down effect<span>el-overlay scrl-dwn</span></p>
            </div>
            <div class="y_col_content">
                <div class="y_man">
                    <dl>
                        <dt class="y_dt"><img src="images/5.jpg"></dt>
                        <dd>
                            <p class="y_p_one">Genelia Deshmukh</p>
                            <p class="y_p_two">Managing Director</p>
                        </dd>
                        <div class="y_meng"></div>
                        <div class="y_square">
                            <div class="y_square_one"><a href="####" class="js-lightbox" data-role="lightbox" data-group="group-2"data-id="two" width="300" height="300" data-source="images/5.jpg"><i class="iconfont icon-fangdajing"></i></a></div>
                            <div class="y_square_two"><a href="####"><i class="iconfont icon-lianjie"></i></a></div>
                        </div>
                    </dl>

                </div>
                <div class="y_man">
                    <dl>
                        <dt class="y_dt"><img src="images/6.jpg"></dt>
                        <dd>
                            <p class="y_p_one">Genelia Deshmukh</p>
                            <p class="y_p_two">Managing Director</p>
                        </dd>
                        <div class="y_meng"></div>
                        <div class="y_square">
                            <div class="y_square_one"><a href="####" class="js-lightbox" data-role="lightbox" data-group="group-2"data-id="two" width="300" height="300" data-source="images/6.jpg"><i class="iconfont icon-fangdajing"></i></a></div>
                            <div class="y_square_two"><a href="####"><i class="iconfont icon-lianjie"></i></a></div>
                        </div>
                    </dl>

                </div>
                <div class="y_man">
                    <dl>
                        <dt class="y_dt"><img src="images/7.jpg"></dt>
                        <dd>
                            <p class="y_p_one">Genelia Deshmukh</p>
                            <p class="y_p_two">Managing Director</p>
                        </dd>
                        <div class="y_meng"></div>
                        <div class="y_square">
                            <div class="y_square_one"><a href="####" class="js-lightbox" data-role="lightbox" data-group="group-2"data-id="two" width="300" height="300" data-source="images/7.jpg"><i class="iconfont icon-fangdajing"></i></a></div>
                            <div class="y_square_two"><a href="####"><i class="iconfont icon-lianjie"></i></a></div>
                        </div>
                    </dl>

                </div>
                <div class="y_man">
                    <dl>
                        <dt class="y_dt"><img src="images/8.jpg"></dt>
                        <dd>
                            <p class="y_p_one">Genelia Deshmukh</p>
                            <p class="y_p_two">Managing Director</p>
                        </dd>
                        <div class="y_meng"></div>
                        <div class="y_square">
                            <div class="y_square_one"><a href="####" class="js-lightbox" data-role="lightbox" data-group="group-2"data-id="two" width="300" height="300" data-source="images/8.jpg"><i class="iconfont icon-fangdajing"></i></a></div>
                            <div class="y_square_two"><a href="####"><i class="iconfont icon-lianjie"></i></a></div>
                        </div>
                    </dl>

                </div>




            </div>
        </div>
        <!--=========================三层================-->
        <div class="y_col_one">
            <div class="y_col_title">
                <p class="y_p1">Scroll up effect  </p>
                <p class="y_p2">You can use scroll down effect <span>el-overlay scrl-up</span></p>
            </div>
            <div class="y_col_content">
                <div class="y_man">
                    <dl>
                        <dt class="y_dt"><img src="images/1.jpg"></dt>
                        <dd>
                            <p class="y_p_one">Genelia Deshmukh</p>
                            <p class="y_p_two">Managing Director</p>
                        </dd>
                        <div class="y_meng"></div>
                        <div class="y_square">
                            <div class="y_square_one"><a href="####" class="js-lightbox" data-role="lightbox" data-group="group-3"data-id="three" width="300" height="300" data-source="images/1.jpg" ><i class="iconfont icon-fangdajing"></i></a></div>
                            <div class="y_square_two"><a href="####"><i class="iconfont icon-lianjie"></i></a></div>
                        </div>
                    </dl>

                </div>
                <div class="y_man">
                    <dl>
                        <dt class="y_dt"><img src="images/2.jpg"></dt>
                        <dd>
                            <p class="y_p_one">Genelia Deshmukh</p>
                            <p class="y_p_two">Managing Director</p>
                        </dd>
                        <div class="y_meng"></div>
                        <div class="y_square">
                            <div class="y_square_one"><a href="####" class="js-lightbox" data-role="lightbox" data-group="group-3"data-id="three" width="300" height="300" data-source="images/2.jpg" ><i class="iconfont icon-fangdajing"></i></a></div>
                            <div class="y_square_two"><a href="####"><i class="iconfont icon-lianjie"></i></a></div>
                        </div>
                    </dl>

                </div>
                <div class="y_man">
                    <dl>
                        <dt class="y_dt"><img src="images/3.jpg"></dt>
                        <dd>
                            <p class="y_p_one">Genelia Deshmukh</p>
                            <p class="y_p_two">Managing Director</p>
                        </dd>
                        <div class="y_meng"></div>
                        <div class="y_square">
                            <div class="y_square_one"><a href="####" class="js-lightbox" data-role="lightbox" data-group="group-3"data-id="three" width="300" height="300" data-source="images/3.jpg" ><i class="iconfont icon-fangdajing"></i></a></div>
                            <div class="y_square_two"><a href="####"><i class="iconfont icon-lianjie"></i></a></div>
                        </div>
                    </dl>

                </div>
                <div class="y_man">
                    <dl>
                        <dt class="y_dt"><img src="images/4.jpg"></dt>
                        <dd>
                            <p class="y_p_one">Genelia Deshmukh</p>
                            <p class="y_p_two">Managing Director</p>
                        </dd>
                        <div class="y_meng"></div>
                        <div class="y_square">
                            <div class="y_square_one"><a href="####" class="js-lightbox" data-role="lightbox" data-group="group-3"data-id="three" width="300" height="300" data-source="images/4.jpg"><i class="iconfont icon-fangdajing"></i></a></div>
                            <div class="y_square_two"><a href="####"><i class="iconfont icon-lianjie"></i></a></div>
                        </div>
                    </dl>

                </div>




            </div>
        </div>





    </div>
  </div>

</div>
<footer> 2017 © Ample Admin brought to you by themedesigner.in </footer>


</body>
</html>
<script src="js/jquery-1.8.3.min.js"></script>
<!--<script src="js/public.js"></script>-->
<script src="js/user_card.js"></script>
<script src="js/lightbox.js"></script>